<template>
  <van-row class="wallet-container" type="flex">
    <!-- NavBar Start -->
    <van-nav-bar
      class="nav-bar"
      title="钱包"
      @click-left="$router.back(-1)"
      @click-right="onClickRight"
    >
      <!-- 返回 -->
      <template #left>
        <van-row type="flex" justify="center" class="nav-bar-left">
          <img src="@/assets/image/btn_return.png" />
        </van-row>
      </template>

      <!-- 帮助 -->
      <template #right>
        <van-row type="flex" justify="end" class="nav-bar-right">
          <img src="@/assets/image/icon_help.png" />
        </van-row>
      </template>
    </van-nav-bar>
    <!-- NavBar End -->

    <!-- 核心 Start-->
    <van-row id="wallet-main">
      <!-- 红包描述 -->
      <van-row
        class="red-packet-description"
        type="flex"
        justify="center"
        align="center"
      >
        <img class="red-packet-icon" src="@/assets/image/icon_redbacket.png" />
        <span class="red-packet-text">现金红包</span>
      </van-row>

      <!-- 用户金额 -->
      <van-row
        class="user-total-money"
        type="flex"
        justify="center"
        align="center"
      >
        <span> {{ this.user.totalMoney.toFixed(2) }}元</span>
      </van-row>

      <!-- 提现按钮 -->
      <van-row class="money-getout" type="flex" justify="center" align="center">
        <button @click="moneyGetout">去提现</button>
      </van-row>

      <!-- 用户福卡文字 -->
      <van-row class="user-card-text" type="flex" align="center">
        <span>我的福卡</span>
      </van-row>

      <!-- 用户福卡详情 -->
      <van-row
        class="user-card-wrap"
        type="flex"
        justify="space-around"
        align="center"
      >
        <CardItem
          :count="item.count"
          :index="index"
          :key="item.id"
          v-for="(item, index) in user.cardList"
          class="user-card-item"
          :style="{
            background:
              item.count >= 1
                ? 'url(' +
                  require('../assets/image/default_card_' +
                    item.name +
                    '.png') +
                  ') no-repeat center/ contain '
                : 'url(' +
                  require('../assets/image/dark_card_' + item.name + '.png') +
                  ') no-repeat center/ contain ',
          }"
        />
      </van-row>

      <!-- 兑换按钮 -->
      <van-row class="exchange" type="flex" justify="center" align="center">
        <button @click="exchange" :disabled="!countNumber">立即兑换</button>
      </van-row>
    </van-row>
    <!-- 核心 End -->
  </van-row>
</template>

<script>
import CardItem from "@/components/CardItem";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "Wallet",
  components: { CardItem },
  props: {},
  data() {
    return {};
  },
  computed: {
    countNumber() {
      return this.user.cardList.every((item) => {
        return item.count >= 1;
      });
    },
    ...mapGetters("activity", {
      user: "user",
    }),
  },
  watch: {},
  created() {
    console.log(this.user);
  },
  mounted() {},
  methods: {
    onClickRight() {},
    exchange() {
      if (!this.countNumber) return;
      this.flag = Boolean(Math.round(Math.random()));
      if (this.flag === true) {
        for (const item of this.user.cardList) {
          if (item.count > 0) {
            item.count--;
          } else {
            item.count === 0;
          }
        }
      }
    },
    moneyGetout() {},
  },
};
</script>

<style scoped lang='less'>
.wallet-container {
  height: 100%;
  flex-direction: column;
  // Navbar
  /deep/.van-nav-bar__content {
    height: 54px;
    box-shadow: 0px 4px 6px 0px #f3f6fa;

    .nav-bar-left {
      img {
        width: 23px;
        height: 23px;
      }
    }
    .van-nav-bar__title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #3b3b3b;
      line-height: 24px;
    }
    .nav-bar-right {
      img {
        width: 23px;
        height: 23px;
      }
    }
  }

  #wallet-main {
    flex: 1;
    padding: 0 16px;

    // 红包描述
    .red-packet-description {
      margin: 19px 0 20px 0;
      .red-packet-icon {
        width: 12px;
        height: 16px;
        margin: 0 8px 0 0;
      }
      .red-packet-text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3b3b3b;
        line-height: 19px;
      }
    }

    // 用户金额
    .user-total-money {
      margin: 0 0 35px 0;
      span {
        font-size: 35px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #3b3b3b;
        line-height: 49px;
      }
    }

    // 去提现按钮
    .money-getout {
      margin: 0 0 27px 0;
      button {
        width: 100%;
        height: 46px;
        background: #6686f0;
        border-radius: 8px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 26px;
      }
    }

    // 用户福卡文字

    .user-card-text {
      margin: 0 0 10px 0;
      span {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #3b3b3b;
        line-height: 22px;
      }
    }
    // 用户福卡详情
    .user-card-wrap {
      margin: 0 0 17px 0;
      width: 100%;
      height: 103px;
      background: #faf7f5;
      border-radius: 8px;
      .user-card-item {
        width: 60px;
        height: 80px;
      }
    }

    // 立即兑换
    .exchange {
      button {
        width: 100%;
        height: 46px;
        background-color: #6785f1;
        border-radius: 8px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 26px;
        &:disabled {
          background-color: #dddddd;
        }
      }
    }
  }
}
</style>